<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>统一登录页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script crossorigin="anonymous" integrity="sha512-YXLGLsQBiwHPHLCAA9npZWhADUsHECjkZ71D1uzT2Hpop82/eLnmFb6b0jo8pK4T0Au0g2FETrRJNblF/46ZzQ==" src="https://lib.baomitu.com/vue/2.6.12/vue.js"></script>
    <!-- 引入 moment.min.js -->
    <script crossorigin="anonymous" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" src="https://lib.baomitu.com/moment.js/2.29.1/moment.min.js"></script>
    <script crossorigin="anonymous" integrity="sha512-QO3Dxk94nAu8f3a0Agit9gOxPNfX8MOYZPzcyj1WutlixkVZ6CpBeDbB/Ekt1rw9ZaHMI7NL8HlSUDwFlXfzAQ==" src="https://lib.baomitu.com/ant-design-vue/1.7.2/antd.js"></script>
    <link crossorigin="anonymous" integrity="sha512-sTYjG5YMw07KkFo+CDtQ/B2405Uu5Sik4uJNJKhKRjJbVLhoHGmo94u34ECH2r7wwYtmV4iadyq/uhGI3JqmGg==" href="https://lib.baomitu.com/ant-design-vue/1.7.2/antd.css" rel="stylesheet">
    <link crossorigin="anonymous" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" href="https://lib.baomitu.com/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <link crossorigin="anonymous" integrity="sha512-gFn7XRm5v3GlgOwAQ80SXDT8pyg6uaV9JbW2OkNx5Im2jR8zx2X/3DbHymcZnUraU+klZjRJqNfNkFN7SyR3fg==" href="https://lib.baomitu.com/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" src="https://lib.baomitu.com/axios/0.21.0/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <div class="container-wrapper">
            <a-spin :spinning="loading">
                <div class="halo-logo animated fadeInUp">
                    <span>OIO统一登录</span>
                </div>
                <div class="animated">
                    <a-form
                            layout="vertical"
                            @keyup.enter.native="login">
                        <a-form-item
                                class="animated fadeInUp"
                                :style="{'animation-delay': '0.1s'}">
                            <a-input
                                    placeholder="手机号"
                                    v-model="username">
                                <a-icon
                                        slot="prefix"
                                        type="user"
                                        style="color: rgba(0,0,0,.25)">
                                </a-icon>
                            </a-input>
                        </a-form-item>
                        <a-form-item
                                class="animated fadeInUp"
                                :style="{'animation-delay': '0.2s'}">
                            <a-input
                                    v-model="password"
                                    type="password"
                                    placeholder="密码">
                                <a-icon
                                        slot="prefix"
                                        type="lock"
                                        style="color: rgba(0,0,0,.25)">
                                </a-icon>
                            </a-input>
                        </a-form-item>
                        <a-form-item
                                v-if="showRestPwdByDefaultPwd"
                                class="animated fadeInUp"
                                :style="{'animation-delay': '0.2s'}">
                            <a-input
                                    v-model="newPwdOne"
                                    type="password"
                                    placeholder="新密码">
                                <a-icon
                                        slot="prefix"
                                        type="lock"
                                        style="color: rgba(0,0,0,.25)">
                                </a-icon>
                            </a-input>
                        </a-form-item>
                        <a-form-item
                                v-if="showRestPwdByDefaultPwd"
                                class="animated fadeInUp"
                                :style="{'animation-delay': '0.2s'}">
                            <a-input
                                    v-model="newPwdTwo"
                                    type="password"
                                    placeholder="确认新密码">
                                <a-icon
                                        slot="prefix"
                                        type="lock"
                                        style="color: rgba(0,0,0,.25)">
                                </a-icon>
                            </a-input>
                        </a-form-item>
                        <a-form-item
                                v-if="clientOrgList && clientOrgList.length > 1"
                                class="animated fadeInUp"
                                :style="{'animation-delay': '0.3s'}">
                            <a-radio-group v-model="orgId">
                                <a-radio :value="item.orgId" v-for="item in clientOrgList">
                                    {{item.orgName}}
                                </a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <a-form-item
                                class="animated fadeInUp"
                                :style="{'animation-delay': '0.3s'}">
                            <a-button
                                    type="primary"
                                    :block="true"
                                    :loading="loginLoading"
                                    @click="login">
                                登录
                            </a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </a-spin>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            loading:false,
            clientId:'${clientId}',
            redirectUrl:'${redirectUrl}',
            appType:'${appType}',
            username:'',
            password:null,
            showRestPwdByDefaultPwd:false,
            newPwdOne:'',
            newPwdTwo:'',
            loginLoading: false,
            clientOrgList:${clientOrgList},
            orgId:'${defaultOrgId}'
        },
        methods:{
            login(){
                this.loginLoading = true;
                var that = this;
                if (!this.showRestPwdByDefaultPwd) {
                    axios.post('/oauth/login/loginByPwd', {
                        userName: this.username,
                        pwd: this.password,
                        clientId: this.clientId,
                        redirectUrl: this.redirectUrl,
                        appType: this.appType,
                        orgId: this.orgId
                    }).then(function (response) {
                        console.log(response.data);
                        if (response.data.code && response.data.code === 406) {
                            that.$message.success('您正在使用默认密码，请先修改！',10);
                            that.showRestPwdByDefaultPwd = true;
                            that.loginLoading = false;
                            return;
                        }
                        if (response.data.code && response.data.code === 200) {
                            that.$message.success('认证成功，即将跳转！');
                            window.location.href = response.data.data;
                            //that.loginLoading = false;
                            return;
                        }
                        that.$message.error(response.data.message);
                        that.loginLoading = false;
                        //todo 密码加密
                    }).catch(function (error) {
                        that.loginLoading = false;
                            console.log(error);
                            that.$message.error(error.data.message);
                        });
                } else {
                    if (this.newPwdOne !== this.newPwdTwo) {
                        this.$message.error('两次新密码不一致！',10);
                        that.loginLoading = false;
                        return;
                    }
                    axios.post('/oauth/users/setNewPwdByDefaultPwd', {
                        userName: this.username,
                        oldPwd: this.password,
                        newPwd: this.newPwdOne
                    }).then(function (response) {
                        console.log(response.data);
                        if (response.data.code && response.data.code === 200) {
                            that.showRestPwdByDefaultPwd = false;
                            that.$message.success('修改密码成功，即将登录！');
                            that.password = that.newPwdOne;
                            that.login();
                        }
                        that.loginLoading = false;
                    }).catch(function (error) {
                        console.log(error);
                        let msg = error.data ? error.data.message ? error.data.message : error.data.message : '系统异常';
                        that.$message.error(msg,5);
                        that.loginLoading = false;
                    });
                }
            }
        }
    })
</script>
<style>
    body {
        height: 100%;
        background-color: #f5f5f5;
    }
    .container-wrapper {
        background: #ffffff;
        position: absolute;
        border-radius: 5px;
        top: 45%;
        left: 50%;
        margin: -160px 0 0 -160px;
        width: 320px;
        padding: 18px 28px 28px 28px;
        box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
    }
    .container-wrapper .halo-logo {
        margin-bottom: 20px;
        text-align: center;
    }
    .container-wrapper .halo-logo span {
        vertical-align: text-bottom;
        font-size: 38px;
        display: inline-block;
        font-weight: 600;
        color: #1790fe;
        background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
    }
    .container-wrapper .halo-logo span small {
        margin-left: 5px;
        font-size: 35%;
    }
    .container-wrapper .tip {
        cursor: pointer;
        margin-left: 0.5rem;
        float: right;
    }
    .fadeInUp {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }
    .ant-form .ant-form-item {
        padding-bottom: 0!important;
        margin-bottom: 20px;
    }
</style>
</html>